<template>
  <div class="page light">
    <main class=" pug-pro-basicLayout-content pug-pro-basicLayout-has-header">
      <div class="pug-pro-page-container">
        <div class="pug-pro-page-container-warp">
          <div class="pug-page-header has-breadcrumb has-footer">
            <div class="pug-page-header-heading">
              <div class="pug-page-header-heading-left"><span class="pug-page-header-heading-title"
                                                              title="搜索列表（文章）">搜索列表（文章）</span></div>
            </div>
            <div class="pug-page-header-footer">
              <div class="pug-tabs pug-tabs-top pug-pro-page-container-tabs">
                <div role="tablist" class="pug-tabs-nav">
                  <div class="pug-tabs-nav-wrap">
                    <div class="pug-tabs-nav-list" style="transform: translate(0px, 0px);">
                      <div class="pug-tabs-tab pug-tabs-tab-active">
                        <div role="tab" aria-selected="true" class="pug-tabs-tab-btn" tabindex="0"
                             id="rc-tabs-3-tab-articles" aria-controls="rc-tabs-3-panel-articles">文章
                        </div>
                      </div>
                      <div class="pug-tabs-tab">
                        <div role="tab" aria-selected="false" class="pug-tabs-tab-btn" tabindex="0"
                             id="rc-tabs-3-tab-projects" aria-controls="rc-tabs-3-panel-projects">项目
                        </div>
                      </div>
                      <div class="pug-tabs-tab">
                        <div role="tab" aria-selected="false" class="pug-tabs-tab-btn" tabindex="0"
                             id="rc-tabs-3-tab-applications" aria-controls="rc-tabs-3-panel-applications">应用
                        </div>
                      </div>
                      <div class="pug-tabs-ink-bar pug-tabs-ink-bar-animated"
                           style="left: 0px; width: 32px;"></div>
                    </div>
                    <div style="font-weight: bold ;font-size: 12px;position: absolute;right:0;top:10px;"> 共有
                      {{ total || 0 }} 条记录
                    </div>
                  </div>
                  <div class="pug-tabs-nav-operations pug-tabs-nav-operations-hidden">
                    <button type="button" class="pug-tabs-nav-more" tabindex="-1" aria-hidden="true"
                            aria-haspopup="listbox" aria-controls="rc-tabs-3-more-popup" id="rc-tabs-3-more"
                            aria-expanded="false" style="visibility: hidden; order: 1;"><span role="img"
                                                                                              aria-label="ellipsis"
                                                                                              class="anticon anticon-ellipsis"><svg
                      viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em"
                      height="1em" fill="currentColor" aria-hidden="true"><path
                      d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span>
                    </button>
                  </div>
                </div>
                <div class="pug-tabs-content-holder">
                  <div class="pug-tabs-content pug-tabs-content-top">
                    <div role="tabpanel" tabindex="0" aria-hidden="false"
                         class="pug-tabs-tabpane pug-tabs-tabpane-active" id="rc-tabs-3-panel-articles"
                         aria-labelledby="rc-tabs-3-tab-articles"></div>
                    <div role="tabpanel" tabindex="-1" aria-hidden="true" class="pug-tabs-tabpane"
                         id="rc-tabs-3-panel-projects" aria-labelledby="rc-tabs-3-tab-projects"
                         style="display: none;"></div>
                    <div role="tabpanel" tabindex="-1" aria-hidden="true" class="pug-tabs-tabpane"
                         id="rc-tabs-3-panel-applications" aria-labelledby="rc-tabs-3-tab-applications"
                         style="display: none;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pug-pro-grid-content">
          <div class="pug-pro-grid-content-children">
            <div class="pug-pro-layout-watermark-wrapper" style="position: relative;">
              <div class="pug-pro-page-container-children-content">
                <div class="pug-card">
                  <div class="pug-card-body">
                    <form class="pug-form pug-form-inline">
                      <div class="standardFormRow___2SuxW standardFormRowBlock___25ip_"
                           style="padding-bottom: 11px;">
                        <div class="label___2igWv"><span>所属类目</span></div>
                        <div class="content___v8hLk">
                          <div class="pug-row pug-form-item" style="row-gap: 0px;">
                            <div class="pug-col pug-form-item-control">
                              <div class="pug-form-item-control-input">
                                <div class="pug-form-item-control-input-content">
                                  <div class="tagSelect___lC4Pt hasExpandTag___2bftZ"><span
                                    class="pug-tag pug-tag-checkable">全部</span><span
                                    class="pug-tag pug-tag-checkable">类目一</span><span
                                    class="pug-tag pug-tag-checkable">类目二</span><span
                                    class="pug-tag pug-tag-checkable">类目三</span><span
                                    class="pug-tag pug-tag-checkable">类目四</span><span
                                    class="pug-tag pug-tag-checkable">类目五</span><span
                                    class="pug-tag pug-tag-checkable">类目六</span><span
                                    class="pug-tag pug-tag-checkable">类目七</span><span
                                    class="pug-tag pug-tag-checkable">类目八</span><span
                                    class="pug-tag pug-tag-checkable">类目九</span><span
                                    class="pug-tag pug-tag-checkable">类目十</span><span
                                    class="pug-tag pug-tag-checkable">类目十一</span><span
                                    class="pug-tag pug-tag-checkable">类目十二</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div
                        class="standardFormRow___2SuxW standardFormRowLast___3ZKmo standardFormRowGrid___TWpoF">
                        <div class="content___v8hLk">
                          <div class="pug-row" style="margin-left: -8px; margin-right: -8px; row-gap: 0px;">
                            <div
                              class="pug-col pug-col-xs-24 pug-col-sm-24 pug-col-md-12 pug-col-lg-10 pug-col-xl-10"
                              style="padding-left: 8px; padding-right: 8px;">
                              <div class="xqui-inline"><label class="xqui-form-label">关键词</label>
                                <div class="xqui-input-inline"><input autocomplete="off" class="xqui-input" type="text"
                                                                      v-model.lazy.trim="conditionVal"></div>
                              </div>
                              <div class="xqui-inline">
                                <button @click.prevent="findUserList" class="xqui-btn xqui-btn-primary"
                                        lay-filter="data-search-btn" lay-submit="" type="submit">搜 索
                                </button>
                                <router-link to="/book/add">
                                  <button class="xqui-btn xqui-btn-primary"
                                          lay-filter="data-search-btn" lay-submit="" type="submit">添 加
                                  </button>
                                </router-link>
                              </div>
                            </div>
                            <div
                              class="pug-col pug-col-xs-24 pug-col-sm-24 pug-col-md-12 pug-col-lg-10 pug-col-xl-10"
                              style="padding-left: 8px; padding-right: 8px;">
                              <div class="pug-row pug-form-item" style="row-gap: 0px;">
                                <div class="pug-col pug-form-item-label"><label for="user" class=""
                                                                                title="活跃用户">发布状态</label>
                                </div>
                                <div
                                  class="pug-col pug-form-item-control pug-col-xs-24 pug-col-sm-24 pug-col-md-12">
                                  <div class="pug-form-item-control-input">
                                    <div class="pug-form-item-control-input-content">
                                      <div class="pug-select pug-select-single pug-select-show-arrow"
                                           style="max-width: 200px; width: 100%;">
                                        <pug-select @change="searchItem" :items='[{text:"发布",value:"1"},{text:"未发布",value:"0"}]'></pug-select>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              class="pug-col pug-col-xs-24 pug-col-sm-24 pug-col-md-12 pug-col-lg-10 pug-col-xl-10"
                              style="padding-left: 8px; padding-right: 8px;">
                              <div class="pug-row pug-form-item" style="row-gap: 0px;">
                                <div class="pug-col pug-form-item-label"><label for="rate" class=""
                                                                                title="好评度">好评度</label>
                                </div>
                                <div
                                  class="pug-col pug-form-item-control pug-col-xs-24 pug-col-sm-24 pug-col-md-12">
                                  <div class="pug-form-item-control-input">
                                    <div class="pug-form-item-control-input-content">
                                      <div class="pug-select pug-select-single pug-select-show-arrow"
                                           style="max-width: 200px; width: 100%;">
                                        <div class="pug-select-selector"><span
                                          class="pug-select-selection-search"><input id="rate"
                                                                                     autocomplete="off"
                                                                                     type="search"
                                                                                     class="pug-select-selection-search-input"
                                                                                     role="combobox"
                                                                                     aria-haspopup="listbox"
                                                                                     aria-owns="rate_list"
                                                                                     aria-autocomplete="list"
                                                                                     aria-controls="rate_list"
                                                                                     aria-activedescendant="rate_list_0"
                                                                                     readonly=""
                                                                                     unselectable="on"
                                                                                     value=""
                                                                                     style="opacity: 0;"></span><span
                                          class="pug-select-selection-placeholder">不限</span></div>
                                        <span class="pug-select-arrow" unselectable="on" aria-hidden="true"
                                              style="user-select: none;"><span role="img" aria-label="down"
                                                                               class="anticon anticon-down pug-select-suffix"><svg
                                          viewBox="64 64 896 896" focusable="false" data-icon="down"
                                          width="1em" height="1em" fill="currentColor" aria-hidden="true"><path
                                          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                <div class="cardList___2OFVD mt30">
                  <div class="pug-list pug-list-split pug-list-grid">
                    <div class="pug-spin-nested-loading">
                      <div class="pug-spin-container">
                        <div class="pug-row" style="margin-left: -8px; margin-right: -8px; row-gap: 0px;">
                          <div style="width: 20%;max-width: 20%;">
                            <div class="pug-col" style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___1WgqT">
                                  <div class="pug-card-cover"><img alt="Alipay"
                                                                   src="https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png">
                                  </div>
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Alipay</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line"
                                            direction="ltr" style="-webkit-line-clamp: 2;">那是一种内在的东西， 他们到达不了，也无法触及的
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="cardItemContent___Un4wM"><span>几秒前</span>
                                      <div class="avatarList___2kgtw">
                                        <div class="avatarList___1Twgv">
                                          <ul>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"></span>
                                            </li>
                                          </ul>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 20%;max-width: 20%;">
                            <div class="pug-col" style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___1WgqT">
                                  <div class="pug-card-cover"><img alt="Angular"
                                                                   src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png">
                                  </div>
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Angular</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line"
                                            direction="ltr" style="-webkit-line-clamp: 2;"> 希望是一个好东西，也许是最好的，好东西是不会消亡的
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="cardItemContent___Un4wM"><span>2 小时前</span>
                                      <div class="avatarList___2kgtw">
                                        <div class="avatarList___1Twgv">
                                          <ul>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"></span>
                                            </li>
                                          </ul>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 20%;max-width: 20%;">
                            <div class="pug-col" style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___1WgqT">
                                  <div class="pug-card-cover"><img alt="Ant Design"
                                                                   src="https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png">
                                  </div>
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Ant Design</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line"
                                            direction="ltr" style="-webkit-line-clamp: 2;"> 生命就像一盒巧克力，结果往往出人意料
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="cardItemContent___Un4wM"><span>4 小时前</span>
                                      <div class="avatarList___2kgtw">
                                        <div class="avatarList___1Twgv">
                                          <ul>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"></span>
                                            </li>
                                          </ul>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 20%;max-width: 20%;">
                            <div class="pug-col" style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___1WgqT">
                                  <div class="pug-card-cover"><img alt="Ant Design Pro"
                                                                   src="https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png">
                                  </div>
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Ant Design Pro</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line"
                                            direction="ltr" style="-webkit-line-clamp: 2;"> 城镇中有那么多的酒馆，她却偏偏走进了我的酒馆
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="cardItemContent___Un4wM"><span>6 小时前</span>
                                      <div class="avatarList___2kgtw">
                                        <div class="avatarList___1Twgv">
                                          <ul>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"></span>
                                            </li>
                                          </ul>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 20%;max-width: 20%;">
                            <div class="pug-col" style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___1WgqT">
                                  <div class="pug-card-cover"><img alt="Bootstrap"
                                                                   src="https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png">
                                  </div>
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Bootstrap</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line"
                                            direction="ltr" style="-webkit-line-clamp: 2;"> 那时候我只会想自己想要什么，从不想自己拥有什么
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="cardItemContent___Un4wM"><span>8 小时前</span>
                                      <div class="avatarList___2kgtw">
                                        <div class="avatarList___1Twgv">
                                          <ul>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"></span>
                                            </li>
                                          </ul>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 20%;max-width: 20%;">
                            <div class="pug-col" style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___1WgqT">
                                  <div class="pug-card-cover"><img alt="React"
                                                                   src="https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png">
                                  </div>
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>React</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line"
                                            direction="ltr" style="-webkit-line-clamp: 2;">那是一种内在的东西， 他们到达不了，也无法触及的
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="cardItemContent___Un4wM"><span>10 小时前</span>
                                      <div class="avatarList___2kgtw">
                                        <div class="avatarList___1Twgv">
                                          <ul>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"></span>
                                            </li>
                                          </ul>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 20%;max-width: 20%;">
                            <div class="pug-col" style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___1WgqT">
                                  <div class="pug-card-cover"><img alt="Vue"
                                                                   src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png">
                                  </div>
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Vue</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line"
                                            direction="ltr" style="-webkit-line-clamp: 2;"> 希望是一个好东西，也许是最好的，好东西是不会消亡的
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="cardItemContent___Un4wM"><span>12 小时前</span>
                                      <div class="avatarList___2kgtw">
                                        <div class="avatarList___1Twgv">
                                          <ul>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"></span>
                                            </li>
                                          </ul>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 20%;max-width: 20%;">
                            <div class="pug-col" style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___1WgqT">
                                  <div class="pug-card-cover"><img alt="Webpack"
                                                                   src="https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png">
                                  </div>
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Webpack</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line"
                                            direction="ltr" style="-webkit-line-clamp: 2;"> 生命就像一盒巧克力，结果往往出人意料
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="cardItemContent___Un4wM"><span>14 小时前</span>
                                      <div class="avatarList___2kgtw">
                                        <div class="avatarList___1Twgv">
                                          <ul>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"></span>
                                            </li>
                                            <li class="avatarItem___16EyN avatarItemSmall___rCe9R"><span
                                              class="pug-avatar pug-avatar-sm pug-avatar-circle pug-avatar-image"
                                              style="cursor: pointer;"><img
                                              src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"></span>
                                            </li>
                                          </ul>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <div class="page-main-no2">
      <div class="ksd-xqui-body">
        <div class="xqui-table-page">
          <pug-page
            :page-index="currentPage"
            :total="count"
            :page-size="pageSize"
            @change="pageChange">
          </pug-page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import PugPage from '@/components/page/PugPage'

export default {
  name: "Course.vue",
  components: {
    PugPage
  },
  data() {
    return {
      pageSize: 20, //每页显示20条数据
      currentPage: 1, //当前页码
      count: 100, //总记录数
      items: [
        {code: 1, name: " 编程到底该如何学习？", nickname: "xxxxx", sex: 1},
        {code: 2, name: "学习编程之前你要了解的知识！", nickname: "xxxxx", sex: 1},
        {code: 3, name: "工欲善其事，必先利其器！", nickname: "xxxxx", sex: 1},
        {code: 4, name: "基础决定你未来的高度！", nickname: "xxxxx", sex: 1},
        {code: 5, name: "程序的本质就是这些！", nickname: "xxxxx", sex: 1},
        {code: 6, name: "利用集合高效解决问题！", nickname: "xxxxx", sex: 1},
        {code: 7, name: "从零开始开发游戏！", nickname: "xxxxx", sex: 1},
        {code: 8, name: "日常开发必备知识！", nickname: "xxxxx", sex: 1},
        {code: 9, name: "最简单的数据结构！", nickname: "xxxxx", sex: 1},
        {code: 10, name: "Java进阶必会技能！", nickname: "xxxxx", sex: 1},
      ]
    }
  },
  methods: {
    //获取数据
    getList() {

    },

    //从page组件传递过来的当前page
    pageChange(page) {
      this.currentPage = page
    },

    searchItem(item){
      alert(JSON.stringify(item))
    }
  },
  mounted() {
    //请求第一页数据
    this.getList()
  }
}
</script>

<style scoped>

</style>
